<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
	<head th:include="/common/shop_common :: source"></head>
	
	<body>
	<div th:include="/common/shop_common :: header"></div>
	<!--banner-->
	<div class="banner-top">
		<div class="container">
			<h2 class="animated wow fadeInLeft" data-wow-delay=".5s">商品详情</h2>
			<h3 class="animated wow fadeInRight" data-wow-delay=".5s">
				<a href="index.html">Home</a><label>/</label>Products<label>/</label>Women's
			</h3>
			<div class="clearfix"></div>
		</div>
	</div>

	<!--content-->
	<div class="product">
		<div class="container">
			<div class="col-md-3 product-bottom ">
				<!--categories-->
				<div class="categories animated wow fadeInUp animated"
					data-wow-delay=".5s">
					<h3>分类列表</h3>
					<ul class="cate">
						<li th:each="classifys : ${classifys}">
							<i class="glyphicon glyphicon-menu-right"></i>
							<a th:href="@{/customer/products}+'?classId='+ ${classifys.id} " th:text="${classifys.className}"></a> <span></span>
						</li>
					</ul>
				</div>
				<!--//menu-->

				<div class="sellers animated wow fadeInDown" data-wow-delay=".5s">

					<h3 class="best">本周最火</h3>
					<div class="product-head">
						<div class="product-go">
							<div class=" fashion-grid">
								<a href="single.html"><img class="img-responsive "
									src="images/pcc.jpg" alt=""></a>

							</div>
							<div class=" fashion-grid1">
								<h6 class="best2">
									<a href="single.html">Lorem ipsum </a>
								</h6>
								<span class=" price-in1"> <del>$50.00</del>$40.00
								</span>
								<p>The standard chunk of Lorem Ipsum used</p>
							</div>

							<div class="clearfix"></div>
						</div>
						<div class="product-go">
							<div class=" fashion-grid">
								<a href="single.html"><img class="img-responsive "
									th:src="@{/webstore/images/052.jpg}" alt=""></a>

							</div>
							<div class=" fashion-grid1">
								<h6 class="best2">
									<a href="single.html">Lorem ipsum </a>
								</h6>
								<span class=" price-in1"> <del>$50.00</del>$40.00
								</span>
								<p>The standard chunk of Lorem Ipsum used</p>
							</div>
							<div class="clearfix"></div>
						</div>

					</div>
				</div>
				<!---->
			</div>
			<div class="col-md-9 animated wow fadeInRight" data-wow-delay=".5s">
				<div class="col-md-5 grid-im">
					<div class="flexslider">
						<ul class="slides">
							<li data-thumb="images/si.jpg">
								<div class="thumb-image">
									<img th:src="${product.img}" data-imagezoom="true"
										class="img-responsive">
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-7 single-top-in">
					<div class="span_2_of_a1 simpleCart_shelfItem">
						<h3 th:text="${product.name}"></h3>
						<p class="in-para" th:text="${product.name}"></p>
						<div class="price_single">
							<span class="reducedfrom item_price">$</span><span class="reducedfrom item_price" th:text="${product.salPrice}"></span> 
							<a th:onclick="'javascript:addcar(\''+${product.id}+'\');'" data-text="加入购物车" class="but-hover1 item_add">加入购物车</a>
							<div class="clearfix"></div>
						</div>
						<div class="clearfix"></div>
					</div>
					<!----- tabs-box ---->
					<div class="sap_tabs">
						<div id="horizontalTab"
							style="display: block; width: 100%; margin: 0px;">
							<ul class="resp-tabs-list">
								<li class="resp-tab-item " aria-controls="tab_item-0" role="tab"><span>商品详情</span></li>
								<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>价格信息</span></li>
								<li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>预览详情</span></li>
							</ul>
							<div class="resp-tabs-container">
								<h2 class="resp-accordion resp-tab-active" role="tab"
									aria-controls="tab_item-0">
									<span class="resp-arrow"></span><a th:text="${product.sku}"></a>
								</h2>
								<div class="tab-1 resp-tab-content resp-tab-content-active"
									aria-labelledby="tab_item-0" style="display: block">
									<div class="facts">
										<p><a>商品原价:</a><a th:text="${product.relPrice}"></a></p>
										<ul>
											<li th:text="${product.sku}"></li>
											<li>苹果、葡萄、柑桔和香蕉并称为世界四大水果，而苹果就是四大水果之冠。它们都有很高的营养价值，有利于身体的生长发育</li>
										</ul>
									</div>

								</div>
							</div>
						</div>
					</div>

				</div>
				<!----->
				<div class="clearfix"></div>
				<div class=" col-md-si">
					<div class="col-sm-4 item-grid simpleCart_shelfItem">
						<div class="grid-pro">
							<div class="grid-product ">
								<figure>
									<a th:href="@{/customer/signle?id=1}">
										<span class="grid-img">
											<img th:src="@{/webstore/images/001.png}" class="img-responsive" alt=""></img>
										</span >
									</a>
								</figure>
							</div>
							<div class="women">
								<h6>
									<a th:href="@{/customer/signle?id=7}">查看详情</a>
								</h6>
								<p>
									<del>$100.00</del>
									<em class="item_price">$70.00</em>
								</p>
								<a href="javascript:addcar(7);" data-text="加入购物车" class="but-hover1 item_add">加入购物车</a>
							</div>
						</div>
					</div>
					
					<div class="col-sm-4 item-grid simpleCart_shelfItem">
						<div class="grid-pro">
							<div class="grid-product ">
								<figure>
									<a th:href="@{/customer/signle?id=6}">
										<span class="grid-img">
											<img th:src="@{/webstore/images/006.png}" class="img-responsive" alt=""></img>
										</span >
									</a>
								</figure>
							</div>
							<div class="women">
								<h6>
									<a th:href="@{/customer/signle?id=6}">查看详情</a>
								</h6>
								<p>
									<del>$100.00</del>
									<em class="item_price">$70.00</em>
								</p>
								<a href="javascript:addcar(6);" data-text="加入购物车" class="but-hover1 item_add">加入购物车</a>
							</div>
						</div>
					</div>
					
					<div class="col-sm-4 item-grid simpleCart_shelfItem">
						<div class="grid-pro">
							<div class="grid-product ">
								<figure>
									<a th:href="@{/customer/signle?id=5}">
										<span class="grid-img">
											<img th:src="@{/webstore/images/005.png}" class="img-responsive" alt=""></img>
										</span >
									</a>
								</figure>
							</div>
							<div class="women">
								<h6>
									<a th:href="@{/customer/signle?id=5}">查看详情</a>
								</h6>
								<p>
									<del>$100.00</del>
									<em class="item_price">$70.00</em>
								</p>
								<a href="javascript:addcar(1);" data-text="加入购物车" class="but-hover1 item_add">加入购物车</a>
							</div>
						</div>
					</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div class="clearfix">
		</div>
	</div>
	</div>

	<div class="social animated wow fadeInDown" data-wow-delay=".1s">
		<div class="container">
			<div class="col-sm-3 social-ic">
				<a href="#">关于我们</a>
			</div>
			<div class="col-sm-3 social-ic">
				<a href="#">私信客服</a>
			</div>
			<div class="col-sm-3 social-ic">
				<a href="#">商业合作</a>
			</div>
			<div class="col-sm-3 social-ic">
				<a href="#">其他帮助</a>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	
	<script type="text/javascript" th:inline="javascript">
	function addcar(id){
		layer.confirm('确定加如购物车？', {
			  btn: ['取消','确定']
			}, function(){
			  layer.msg('期待您的下此购买', {icon: 6});
			}, function(){
				$.ajax({  
		            type: 'post',  
		            dataType: 'json',  
		            url: basePath + '/shopcar/addCar',  
		            data: {
		            	productId:id
		            },  
		            cache: false,  
		            async: true,  
		            success: function (data) {
		            	if(data.code!="200"){
		            		layer.alert('请登陆个人账户', {icon: 2},function(){
		            			window.location.href=basePath+"/user/login"
		            		});
		            	}else{
		            		layer.msg(data.msg, {icon: 6}); 
		            	}
		            }  
		        });
			});
	}
	</script>
</body>
</html>